<template>
  <div class="jiayou-config-layout">
    <snackbar style-color="#4A4A4A"
              back-color="#ffffff"
              status-color="#ffffff"
              :fixed="true"/>

    <div class="content-layout">
      <div class="item-layout">
        <span class="lebel">时间：</span>
        <span class="value">2021-5-31</span>
      </div>
      <div class="item-layout">
        <span class="lebel">油品：</span>
        <span class="value">0 # 柴油</span>
      </div>
      <div class="item-layout">
        <span class="lebel">当前油价：</span>
        <span class="peice">6.70</span>
        <span class="unit">元/升</span>
      </div>

      <div class="input-layout">
        <van-field v-model="value" class="jiayou-input-style" type="number" label="设置油价：" input-align="right"
                   maxlength="10"
                   placeholder="请输入油价">
          <span slot="button">元/升</span>
        </van-field>
      </div>
    </div>
    <div class="bottom-layout">
      <div class="reset-btn">重置</div>
      <div class="confirm-btn">保存</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'config'
  }
</script>

<style lang="scss" scoped>
  .jiayou-config-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;

    .content-layout {
      display: flex;
      flex-direction: column;
      width: 100vw;

      .item-layout {
        margin-left: 40px;
        margin-top: 15px;
        margin-bottom: 4px;

        .lebel {
          font-size: 14px;
          color: #9B9B9B;
        }

        .value {
          margin-left: 16px;
          font-size: 14px;
          color: #4A4A4A;
        }

        .peice {
          color: #FA6400;
          font-size: 19px;
          border-bottom: 1px solid #FA6400;
          margin-left: 5px;
          margin-right: 5px;
          font-weight: bold;
          padding-left: 5px;
          padding-right: 5px;
        }

        .unit {
          font-size: 14px;
          color: #9B9B9B;
        }
      }

      .input-layout {
        margin-top: 30px;
        margin-left: 28px;
        margin-right: 27px;
        border-radius: 2px;
        border: 1px solid #65B651;
      }
    }

    .bottom-layout {
      width: 100vw;
      height: 47px;
      background: #FFFFFF;
      display: flex;
      flex-direction: row;
      position: fixed;
      bottom: 0px;

      .reset-btn {
        width: 121px;
        height: 47px;
        border-top: 1px solid #DDDCDC;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #3A3A3A;
      }

      .confirm-btn {
        flex: 1;
        height: 47px;
        background: linear-gradient(221deg, #7ED785 0%, #64C367 100%);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #FFFFFF;
      }
    }

  }
</style>
